<template>
    <el-dialog :title="this.$root.lang.userinfo.buyLog.qrTip" :visible.sync="showDialog" @close="closeDialog" width="50%" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="qr">
        <div id="qrcode" ref="qrcode"></div>
        <div calss="tip">{{ $parent.payTip}}</div>
      </div>
    </el-dialog>
</template>

<script>
import '@/options/baseState'
import QRCode from 'qrcodejs2'
export default {
  name: 'ShowQr',
  data() {
    return {
    	loading: false,
    	showDialog: this.show,
    }
  },
  watch: {
    show: function (value) {
      this.showDialog = value
      let self = this
      if(value) {
        setTimeout(function() {
          document.getElementById('qrcode').innerHTML = "";
          self.qrcode = new QRCode('qrcode', {
            width: 200,// 宽度
            height: 200,  // 高度
            text: self.qrUrl, // 二维码内容
          })
        }, 1);
      }
  	},
  },
  props: {
  	show: {
      type: Boolean,
      default: false
    },
    qrUrl: {
    	type: String,
    	default: ''
    }
  },
  methods: {
  	closeDialog() {
      this.$emit('editReceive',{
        key: 'showQr',
        value: this.showDialog
      })
    }
  },
  created() {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/css/style.scss';

.qr {
  margin: auto;
  width: 200px;
  div {
    text-align: center;
    color: $color-blue;
    margin-top: 5px;
  }
}

</style>